<template>

  <el-tree style="max-width: 600px" :data="menus" :props="defaultProps" :expand-on-click-node="false" show-checkbox
    node-key="catId">


    <span>{{ node.label }}</span>
    <div>
      <el-button v-if="node.level <= 2" type="primary" link @click="append(data)">
        Append
      </el-button>
      <el-button v-if="node.childNodes.length == 0" style="margin-left: 4px" type="danger" link
        @click="remove(node, data)">
        Delete
      </el-button>
    </div>

  </el-tree>

</template>

<script setup name="Category">

import { listCategorytree } from "@/api/product/category.js";
const router = useRouter();
const { proxy } = getCurrentInstance();

const menus = ref([]);
const defaultProps = {
  children: 'children',
  label: 'name',
}

function append(data) {
  console.log("append", data);
}

function remove(node, data) {
  console.log("remove", node, data);
}

function handleNodeClick(data) {
  console.log(data);
}

function getList() {
  listCategorytree().then(({ response }) => {
    console.log(response.data);
    this.menus = response.data;
  });
}


getList();


</script>

<style scoped lang="scss"></style>